<template>
  <div class="demo-select-create" style="margin-bottom: 50px">
    <span
      class="info-text"
    >可以自行根据业务订一选项，或提供可跳转按钮的选择器</span
    >
    <div class="column-divider" style="margin-top: 20px">
      <div class="demo-button-line">
        <e-select
          allow-create
          @on-create="handleCreate"
          @on-delete="handleDelete"
          style="width: 300px"
        >
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</e-option
          >
        </e-select>
      </div>
    </div>
    <div class="self-define">在当前页面添加自定义选项（输入无此选项）</div>
    <div>
      <e-select
        allow-create
        filterable
        @on-create="handleCreateNew"
        style="width: 300px"
      >
        <e-option
          v-for="item in cityList"
          :value="item.value"
          :key="item.value"
        >{{ item.label }}</e-option
        >
      </e-select>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DemoSelectSize',
  data() {
    return {
      cityList: [
        {
          value: 'New York',
          label: 'New York',
        },
        {
          value: 'London',
          label: 'London',
        },
        {
          value: 'Sydney',
          label: 'Sydney',
        },
        {
          value: 'Ottawa',
          label: 'Ottawa',
        },
        {
          value: 'Paris',
          label: 'Paris',
        },
        {
          value: 'Canberra',
          label: 'Canberra',
        },
      ],
      cityList1: [
        {
          value: 'New York',
          label: 'New York',
        },
        {
          value: 'London',
          label: 'London',
        },
        {
          value: 'Sydney',
          label: 'Sydney',
        },
        {
          value: 'Ottawa',
          label: 'Ottawa',
        },
        {
          value: 'Paris',
          label: 'Paris',
        },
        {
          value: 'Canberra',
          label: 'Canberra',
        },
      ],
      cityList2: [
        {
          value: 'New York',
          label: 'New York',
        },
        {
          value: 'London',
          label: 'London',
        },
        {
          value: 'Sydney',
          label: 'Sydney',
        },
        {
          value: 'Ottawa',
          label: 'Ottawa',
        },
        {
          value: 'Paris',
          label: 'Paris',
        },
        {
          value: 'Canberra',
          label: 'Canberra',
        },
      ],
      singleValue: '',
      multiValue: [],
    }
  },
  methods: {
    handleCreate(val) {
      let result = this.cityList.some((item) => item.value === val)
      if (!result) {
        this.cityList.push({
          value: val,
          label: val,
        })
      }
    },
    handleCreateNew(val) {
      let result = this.cityList.some((item) => item.value === val)
      if (!result) {
        this.cityList.push({
          value: val,
          label: val,
        })
      }
    },
    handleDelete(val) {
      this.cityList = this.cityList.filter((item) => item.value !== val.value)
    },
    onSingleRefresh() {
      this.cityList1 = [
        { value: 'Suzhou', label: '苏州' },
        { value: 'Shanghai', label: '上海' },
      ]
    },
    onMultiRefresh() {
      this.cityList2 = [
        { value: 'Beijing', label: '北京' },
        { value: 'Nanjing', label: '南京' },
        { value: 'Tianjin', label: '天津' },
        { value: 'Wuhan', label: '武汉' },
      ]
    },
  },
}
</script>
<style>
.demo-select-create .demo-button-line .d-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(98, 54, 255, 1);
  width: 10rem;
  margin-bottom: 5px;
}

.refresh-item:hover {
  color: #337dff;
}

.refresh-item .haloe-icon {
  margin-right: 8px;
}
.self-define {
  margin: 10px 0;
  color: #6f7d96;
}
.info-text {
  color: #6f7d96;
  margin-bottom: 20px;
}
</style>
